<template>
    <!-- 关于 -->
    <div class="webInfoContent">
        <div class="webInfoBox">
            <div>
                <SvgIcon width="150px" height="150px" name="frog" color="#f5c3cb"></SvgIcon>
            </div>
            <h1 class="webInfoBoxTitle">paper-frog</h1>
            <p class="webInfoBoxText">version 1.0.1</p>
            <div class="webInfoMainBox">
                <div class="webInfoMainBoxItem" @click="showMark=true">
                    <span>去评分</span>
                    <van-icon name="arrow" />
                </div>
                <div class="webInfoMainBoxItem" @click="showInfo=true">
                    <span>功能介绍</span>
                    <van-icon name="arrow" />
                </div>
            </div>
        </div>

        <div class="webInfofootBox">
            <p class="webInfofootBoxItem">
                <a href="https://beian.mps.gov.cn/">黑公网安备23010302001748号</a>
            </p>
            <p class="webInfofootBoxItem">
                <a href="https://beian.miit.gov.cn/">黑ICP备2025035930号-1</a>
            </p>
            <p class="webInfofootBoxItem">
                版权所有
            </p>
            <p class="webInfofootBoxItem">
                2025-2025 © paperfrogwei.com All rights reserved.
            </p>
        </div>

        <van-popup
            v-model:show="showMark"
            round
            position="bottom"
            :style="{ height: '35%' }"
            :close-on-click-overlay=true
        >
            <div class="markBox">
                <p class="markBoxTitle">
                    <span class="markBoxTitle1">{{ starValue }}</span>
                    <span class="markBoxTitle2">颗星</span>
                </p>
                <van-rate
                    v-model="starValue"
                    :size="45"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                    allow-half
                    :count="5"
                    @change="starValueChange"
                    touchable
                    clearable
                />
                <div class="markBoxBtn" :class="{active: starValue && starValue > 0}" @click="markBtn">
                    <span>评价</span>
                </div>
            </div>
        </van-popup>

        <van-popup
            v-model:show="showInfo"
            round
            position="bottom"
            :style="{ height: '85%' }"
            :close-on-click-overlay=true
        >
            <div class="infoBox">
                <div style="width: 100%;height: 30px;"></div>
                <p class="infoBoxTitle">✨技术选择：</p>
                <p class="infoBoxText">前端技术栈的选择是关键决策采用以下技术：</p>
                <p class="infoBoxText">使用Vue 3框架进行前端开发。</p>
                <p class="infoBoxText">集成Vant UI组件库以提供丰富的UI元素</p>
                <p class="infoBoxText">基于 vite + Ts + pinia 的移动端页面</p>
                <p class="infoBoxText">包管理工具：pnpm</p>
                <p class="infoBoxText">用以管理个人工具以及尝试一些新奇组件</p>
                <p class="infoBoxTitle">-----------------</p>
                <p class="infoBoxTitle">✨路由设计：</p>
                <p class="infoBoxText">前端路由的设计用于管理页面导航：</p>
                <p class="infoBoxText">使用Vue Router配置路由组件，定义登录页面路由</p>
                <p class="infoBoxText">创建登录表单，包括账号、密码、图形验证码输入框和登录按钮</p>
                <p class="infoBoxText">实施基本输入验证以确保用户输入数据的合法性</p>
                <p class="infoBoxText">提供友好的错误提示，以便用户在登录失败时了解问题</p>
                <p class="infoBoxTitle">-----------------</p>
                <p class="infoBoxTitle">✨Token管理：</p>
                <p class="infoBoxText">用户的身份验证和会话管理非常重要：</p>
                <p class="infoBoxText">使用状态机来存储登录成功后的Token</p>
                <p class="infoBoxText">实现Token的过期校验机制，确保用户在有效时间内保持登录状态</p>
                <p class="infoBoxText">部分工具接口调用万维易源平台以及互联网平台，使用次数每天受限 🚫</p>
                <p class="infoBoxTitle">-----------------</p>
                <p class="infoBoxTitle">✨实用工具涉及功能：</p>
                <p class="infoBoxText">欣赏音乐</p>
                <p class="infoBoxText">单机小游戏</p>
                <p class="infoBoxText">生成二维码</p>
                <p class="infoBoxText">天气情况</p>
                <p class="infoBoxText">AI人工智能</p>
                <p class="infoBoxText">地图功能</p>
                <p class="infoBoxText">canvas手写板</p>
                <p class="infoBoxText">星座运势</p>
                <p class="infoBoxText">今日油价查询</p>
                <p class="infoBoxText">图片压缩</p>
                <p class="infoBoxText">OCR扫描识别图片功能</p>
                <p class="infoBoxText">压缩图片</p>
                <p class="infoBoxText">等等</p>
                <p class="infoBoxText">...</p>
                <p class="infoBoxTitle">-----------------</p>
                <div style="width: 100%;height: 30px;"></div>
            </div>
        </van-popup>

    </div>
</template>
    
<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showFailToast, showConfirmDialog } from 'vant'
import useSettingStore from '@/store/modules/setting'
const settings = useSettingStore()


const route = useRoute()
const router = useRouter()

const showMark = ref<boolean>(false)
const showInfo = ref<boolean>(false)

const starValue = ref(0);

const starValueChange = (val: number) => {
    console.log('val', val)
}

const copy = (mes: string) => {
    var input = document.createElement('input') 
    input.value = mes 
    document.body.appendChild(input) 
    input.select() 
    document.execCommand('copy') 
    document.body.removeChild(input)
    showToast('复制成功')
}


const markBtn = () => {
    if (!starValue.value || starValue.value == 0) {
        return
    }
    if (starValue.value && starValue.value >3) {
        showToast('感谢您的评价')
    } else {
        showToast('鸽们儿没啥用')
    }
    showMark.value = false
    starValue.value = 0
}


onMounted(() => {
    // showConfirmDialog({
    //     title: '',
    //     message: '不支持通话的设备将无法进行拨打，继续使用请点击确认',
    // }).then(() => {
    //     return true
    // })
    // .catch(() => {
    //     // on cancel
    // })
})

</script>


<style lang="scss" scoped>
.webInfoContent {
    width: 100%;
    height: auto;
    min-height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    padding: 15px;
    // background: url('@/assets/img/infoBg.jpg') no-repeat;
    // background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    .webInfoBox {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .webInfoBoxTitle {
            margin: 10px;
            font-size: 25px;
            font-weight: 700;
        }
        .webInfoBoxText {
            margin: 10px;
            font-size: 16px;
            font-weight: 500;
            color: #666;
        }
        .webInfoMainBox {
            width: 100%;
            height: auto;
            margin-top: 30px;
            padding: 0 20px;
            .webInfoMainBoxItem {
                width: 100%;
                height: auto;
                min-height: 50px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                font-size: 16px;
                border-bottom: 0.5px solid #eee;
                &:first-child {
                    border-top: 0.5px solid #eee;
                }
            }
        }
    }
    .webInfofootBox {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .webInfofootBoxItem {
            margin-bottom: 5px;
            font-size: 12px;
            color: #666;
            a {
                color: #666;
                text-decoration:none;
            }
        }
    }
    .markBox {
        width: 100%;
        padding: 20px;
        .markBoxTitle {
            margin-top: 10px;
            margin-bottom: 30px;
            .markBoxTitle1 {
                font-size: 20px;
                font-weight: 500;
                margin-right: 5px;
                color: #f8d44e;
            }
            .markBoxTitle2 {
                font-size: 16px;
            }
        }
        .markBoxBtn {
            margin-top: 30px;
            width: 100%;
            height: 45px;
            background-color: pink;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            border-radius: 16px;
        }
        .active {
            background-color: #f43530;
            color: #fff;
        }
    }
    .infoBox {
        padding: 20px;
        font-size: 14px;
        letter-spacing: 2px; /* 增加2像素的间距 */
        line-height: 120%;
        .infoBoxTitle {
            font-size: 16px;
            margin: 10px;
            font-weight: bold;
        }
        .infoBoxText {
            font-size: 14px;
            margin: 5px;
        }
    }

}
</style>